<template>
  <div>
    <el-row style="font-size: 18px">
      <el-col :span="6">
        <i class="el-icon-bangzhu"></i>
        目标：<b>{{date}}</b>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%;font-size:15px;margin-top: 10px">
      <el-table-column align="center" label="员工姓名" prop="empName"></el-table-column>
      <el-table-column align="center" label="所属部门" prop="deptName"></el-table-column>
      <el-table-column align="center" label="目标值" prop="value"></el-table-column>
      <el-table-column align="center" label="目标内完成值" prop="finish">
        <template slot-scope="s">
          <span style="color: red" v-if="s.row.value > s.row.finish">{{s.row.finish}}  {{s.row.percent | numFilter}}</span>
          <span v-if="s.row.value < s.row.finish">{{s.row.finish}}  {{s.row.percent | numFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark"></el-table-column>
    </el-table>
    <el-row style="height: 450px;background-color:white;margin-top: 10px">
      <el-col :span="12" style="margin-top: 10px">
        <div style="height:400px" ref="pieCharts"></div>
      </el-col>
      <el-col :span="12" style="margin-top: 10px">
        <div style="height:400px" ref="pieChars"></div>
      </el-col>
    </el-row>
    <el-row style="height: 600px;background-color:white;margin-top: 10px" v-if="lineChartShow == false">
      <el-col :span="22" style="margin-top: 10px">
        <div style="height:500px" ref="barCharts"></div>
      </el-col>
    </el-row>
    <el-row style="height: 600px;background-color:white;margin-top: 10px"  v-if="lineChartShow == true">
      <el-col :span="22" style="margin-top: 10px">
        <div style="height:500px" ref="lineCharts"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Asmbdetails",
    data() {
      return {
        tableData:[],
        date:'',
        deptValueList: [],  //部门销售值
        deptFinishList: [], //部门销售完成值
        nameList: [],     //员工名称列表
        valueList: [],    //员工目标值列表
        finishList: [],   //员工完成值列表
        lineChartShow: true,//月份图表显隐
        chartNameList: [],  //折线图月份名列表
        chartValueList: [], //折线图目标值列表
        chartFinishList: [],//折线图完成值列表
        percentList: []     //折线图目标完成比
      }
    },
    created: function () {
      this.clear();
      this.initData();
    },
    methods: {
      initData(){
        var data = this.$route.query.date;
        var month = this.$route.query.months;
        if(month <= 12){
          this.lineChartShow = false;
          var dates = data+"."+"0"+month;
          this.date = dates;
        }
        if(month > 12){
          this.lineChartShow = true;
          if(month == 13){
            var dates = data+"."+"0"+1+"~"+data+"."+"0"+6;
            this.date = dates;
          }
          if(month == 14){
            var dates = data+"."+"0"+7+"~"+data+"."+"0"+12;
            this.date = dates;
          }
          if(month == 15){
            var dates = data+"."+"0"+1+"~"+data+"."+"0"+12;
            this.date = dates;
          }

          this.$axios.get("http://localhost:8088/tar/first-details",
            {params: {date: data, month: month}}
          ).then(v => {
            this.tableData = v.data;
          }).catch(v => {
            window.console.log("访问失败!" + v.data);
          })

          this.$axios.get("http://localhost:8088/tar/chart-name",
            {params: {date: data, month: month}}
          ).then(v => {
            this.chartNameList = v.data;
          }).catch(v => {
            alert("访问失败!" + v.data);
          })

          this.$axios.get("http://localhost:8088/tar/chart-value",
            {params: {date: data, month: month}}
          ).then(v => {
            this.chartValueList = v.data;
          }).catch(v => {
            alert("访问失败!" + v.data);
          })

          this.$axios.get("http://localhost:8088/tar/chart-finish",
            {params: {date: data, month: month}}
          ).then(v => {
            this.chartFinishList = v.data;
          }).catch(v => {
            alert("访问失败!" + v.data);
          })

          this.$axios.get("http://localhost:8088/tar/chart-percent",
            {params: {date: data, month: month}}
          ).then(v => {
            this.percentList = v.data;
          }).catch(v => {
            alert("访问失败!" + v.data);
          })
        }
        if(data != undefined && month != undefined && month < 12) {
          this.$axios.get("http://localhost:8088/tar/check-target",
            {params: {data: data, month: month}}
          ).then(v => {
            this.tableData = v.data;
          }).catch(v => {
            window.console.log("访问失败!" + v.data);
          })

          this.$axios.get("http://localhost:8088/tar/target-name",
            {params: {data: data, month: month}}
          ).then(v => {
            this.nameList = v.data;
          }).catch(v => {
            alert("访问失败!" + v.data);
          })

          this.$axios.get("http://localhost:8088/tar/target-value",
            {params: {data: data, month: month}}
          ).then(v => {
            this.valueList = v.data;
          }).catch(v => {
            alert("访问失败!" + v.data);
          })

          this.$axios.get("http://localhost:8088/tar/target-finish",
            {params: {data: data, month: month}}
          ).then(v => {
            this.finishList = v.data;
          }).catch(v => {
            alert("访问失败!" + v.data);
          })
        }

        this.$axios.get("http://localhost:8088/tar/dept-value",
          {params: {data: data, month: month}}
        ).then(v => {
          this.deptValueList = v.data;
        }).catch(v => {
          alert("访问失败!" + v.data);
        })

        this.$axios.get("http://localhost:8088/tar/dept-finish",
          {params: {data: data, month: month}}
        ).then(v => {
          this.deptFinishList = v.data;
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      pieChart(){
        let myChart = this.$echarts.init(this.$refs.pieCharts);//显示
        myChart.setOption({
          title: {
            text: '部门销售目标值',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'center',
            data: ['销售部',
              '销售一部',
              '销售二部'
            ]
          },
          toolbox: {
            show: true,
            feature: {
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          series: [
            {
              name: '分布',
              type: 'pie',
              radius: '55%',
              center: ['60%', '55%'],
              itemStyle: {
                normal: {
                  label: {
                    position: 'outer',
                    formatter: function (params) {
                      return params.name + "," + (params.percent - 0).toFixed(0) + '%'
                    }
                  }
                }
              },
              data: this.deptValueList
            }
          ],
          color: [
            '#00acee',
            '#79d9f1',
            '#c8efff'
          ],
        })
      },
      pieChar(){
        let myChart = this.$echarts.init(this.$refs.pieChars);//显示
        myChart.setOption({
          title: {
            text: '部门销售完成值',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'center',
            data: ['销售部',
              '销售一部',
              '销售二部'
            ]
          },
          toolbox: {
            show: true,
            feature: {
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          series: [
            {
              name: '分布',
              type: 'pie',
              radius: '55%',
              center: ['60%', '55%'],
              itemStyle: {
                normal: {
                  label: {
                    position: 'outer',
                    formatter: function (params) {
                      return params.name + "," + (params.percent - 0).toFixed(0) + '%'
                    }
                  }
                }
              },
              data: this.deptFinishList
            }
          ],
          color: ["#2ec7c9",
                  "#588dd5",
                  "#07a2a4"
          ],
        })
      },
      barChart() {
        let myChart = this.$echarts.init(this.$refs.barCharts);//显示
        myChart.setOption({
          title : {
            text: '销售部员工目标值与完成值对比',
          },
          tooltip : {
            trigger: 'axis'
          },
          color: ['#0093ff', '#D53A35'],
          legend: {
            data:['目标值','完成值']
          },
          toolbox: {
            show : true,
            feature : {
              dataView : {show: true, readOnly: false},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              data : this.nameList
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'目标值',
              type:'bar',
              barWidth: 30, // 柱形的宽度
              data: this.valueList,
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
                ]
              }
            },
            {
              name:'完成值',
              type:'bar',
              barWidth: 30, // 柱形的宽度
              data: this.finishList,
              markPoint : {
                data : [
                  {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                  {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name : '平均值'}
                ]
              }
            }
          ]
        })
      },
      lineChart(){
        let myChart = this.$echarts.init(this.$refs.lineCharts);//显示
        myChart.setOption({
          title: {
            text: "月度销售目标与完成值对比",
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["目标值", "完成值", "完成比"]
          },
          grid: {
            left: '5%',
            right: '3%'
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: "none"
              },
              dataView: {
                readOnly: false
              },
              magicType: {
                type: ["line", "bar"]
              },
              restore: {},
              saveAsImage: {}
            }
          },
          dataZoom: [{
            startValue: "2019-05-24"
          },
            {
              type: "inside"
            }
          ],
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.chartNameList
          },
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: "{value}"
            }
          },
          series: [{
            name: "目标值",
            type: "line",
            data: this.chartValueList,
            markPoint: {
              data: [{
                type: "max",
                name: "最大值"
              },
                {
                  type: "min",
                  name: "最小值"
                }
              ]
            },
            itemStyle: {
              color: "#5bd1db"
            },
            lineStyle: {
              width: 3
            },
            markLine: {
              label: {
                show: true,
                position: "middle",
                formatter: "{b}: {c}"
              },
              symbol: 'none',
              data: [{
                type: "average",
                name: "平均值"
              },

              ]
            }
          },
            {
              name: "完成值",
              type: "line",
              data: this.chartFinishList,
              markPoint: {
                data: [{
                  type: "max",
                  name: "最大值"
                },
                  {
                    type: "min",
                    name: "最小值"
                  }
                ]
              },
              itemStyle: {
                color: "#00ef09"
              },
              lineStyle: {
                width: 3
              },
              markLine: {
                label: {
                  show: true,
                  position: "middle",
                  formatter: "{b}: {c}"
                },
                symbol: 'none',
                data: [{
                  type: "average",
                  name: "平均值"
                }]
              }
            },
            {
              name: "完成比",
              type: "line",
              data: this.percentList,
              markPoint: {
                data: [{
                  type: "max",
                  name: "最大值"
                },
                  {
                    type: "min",
                    name: "最小值"
                  }
                ]
              },
              itemStyle: {
                color: "#EB5252"
              },
              lineStyle: {
                width: 3
              },
              markLine: {
                label: {
                  show: true,
                  position: "middle",
                  formatter: "{b}: {c}"
                },
                symbol: 'none',
                data: [{
                  type: "average",
                  name: "平均值"
                }]
              }
            }
          ]
        })
      },
      clear(){
        this.date ='';
        this.tableData = [];
        this.deptValueList = [];
        this.deptFinishList = [];
        this.nameList = [];
        this.valueList = [];
        this.finishList = [];
        this.chartNameList = [];
        this.chartValueList = [];
        this.chartFinishList = [];
        this.percentList = [];
      }
    },
    mounted () {
      setTimeout(()=>{this.pieChart()},500);
      setTimeout(()=>{this.pieChar()},500);
      setTimeout(()=>{this.barChart()},500);
      setTimeout(()=>{this.lineChart()},500);
    },
    watch:{
      $route(){//跳转到该页面后需要进行的操作
        this.clear();
        this.initData();
      },
      deptValueList(val){
        this.pieChart();
      },
      deptFinishList(val){
        this.pieChar();
      },
      nameList(val){
        this.barChart();
      },
      valueList(val){
        this.barChart();
      },
      finishList(val){
        this.barChart();
      },
      chartNameList(val){
        this.lineChart();
      },
      chartValueList(val){
        this.lineChart();
      },
      chartFinishList(val){
        this.lineChart();
      },
      percentList(val){
        this.lineChart();
      }
    },
    filters: {
      numFilter (value) {
        let realVal = '';
        if (!isNaN(value) && value!== '') {
          // 截取当前数据到小数点后两位
          realVal = parseFloat(value).toFixed(2);
          var str = Number(realVal*100).toFixed();
          str+="%";
          return str;
        }
      }
    }
  }
</script>

<style scoped>

</style>
